<template>
	<div class="cartoon_list" :class="{active:sns}">
		<div class="list_on">
			<router-link :to="{name:'channel',params:{id:curTid}}" active-class="active">
				<p>推荐</p>
			</router-link>
			<router-link active-class="active" :to="{name:'channel',params:{id:item.tid}}" v-for="(item,index) in NavList" :key="item.index">
				<p>{{item.typename}}</p>
			</router-link>
		</div>
	</div>
</template>

<script>
	import CONFIG from "@/config";
	let partionList=CONFIG.partitionList;
	export default {
		props: {
			tid: {
				type: [String, Number],
				default: 1
			},
			
		},
		created() {
			//			this.NavList=partionList[this.tid]
			this._SetSecondNavList(this.$route.params.id)	
		},
		mounted(){
			this.sNavshow()
		},
		data() {
			return {
				NavList: [],
				curTid: "1",
				sns:true
//				partionList:CONFIG.partitionList
			}
		},
		watch: {
			$route(newValue) {
				this._SetSecondNavList(newValue.params.id)
//				this.$emit("PchangeTid", newValue.params.id)
				//				console.log(newValue)
			},
			tid: function(newV) {
				//				实时更新NavList的内容
				//				this.navList =partionList[newV]
//				this.secondNavList = partionList[newV]
			},
			curTid(newv){
				this.$emit("cur",newv)
			}
		},
		computed: {
//			secondNavList: {
//				get: function() {
//					return this.NavList
//				},
//				set: function(newValue) {
//					if(newValue){
//						//						console.log(newValue);
//						//						console.log(this.curTid)
//						this.curTid = this.tid
//						if(newValue) {
//							this.curTid = this.tid
//						}
//						this.NavList = partionList[this.curTid]
//					}
//				}
//			}
		},
		methods: {
			sNavshow(){
				var scrollAction = {x: 'undefined', y: 'undefined'}, scrollDirection;
				let s=this;
				let isAdd=true;
				let toptim=30;
				window.addEventListener("scroll", () => {
						let	doc = browserRedirectt();
//						console.log(doc)
						doc = doc.scrollTop;
						
//						console.log(doc)
//						console.log("dis", (dis * 10) | 0)
						if(doc < toptim) {
							isAdd=false
						}else {
							isAdd=true
						}
						if(isAdd==true)soo();
//						},500)
						
					})
				function browserRedirectt(){
			        var sUserAgent = navigator.userAgent.toLowerCase();
			        var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
			        var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
			        var bIsMidp = sUserAgent.match(/midp/i) == "midp";
			        var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
			        var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
			        var bIsAndroid = sUserAgent.match(/android/i) == "android";
			        var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
			        var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
			        if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
			            return (document.body)
			        } else {
			            return (document.documentElement)
			        }
			    }
				function soo(){
			        scrollFunc();
			        if(scrollDirection == 'down' ){
			            //页面向下滚动要做的事情
//					            console.log(this)
			            s.sns=false;
			        }
			        else if(scrollDirection == 'up'){
			            //页面向上滚动要做的事情
			            s.sns=true
			        }
				};
				function scrollFunc() {
				    if (typeof scrollAction.x == 'undefined') {
				        scrollAction.x = window.pageXOffset;
				        scrollAction.y = window.pageYOffset;
				    }
				  var diffX = scrollAction.x - window.pageXOffset;
				  var diffY = scrollAction.y - window.pageYOffset;
				    if (diffX < 0) {
				        // Scroll right
				        scrollDirection = 'right';
				    } else if (diffX > 0) {
				        // Scroll left
				        scrollDirection = 'left';
				    } else if (diffY < 0) {
				        // Scroll down
				        scrollDirection = 'down';
				    } else if (diffY > 0) {
				        // Scroll up
				        scrollDirection = 'up';
				    } else {
				        // First scroll event
				    }
				    scrollAction.x = window.pageXOffset;
				    scrollAction.y = window.pageYOffset;
				}

						
			},	
			
			
			
			_SetSecondNavList(tid) {
				const hasCon = partionList[tid]
//				console.log(hasCon);
				if(!hasCon) {
					//					遍历大对象的属性名(键名)
					let handleNav = function() {
						const keyArr = Object.keys(partionList)
//						console.log(keyArr)
						//					核心代码:tid==obj.tid
						for(let i = 0, len = keyArr.length; i < len; i++) {
							//						一定要清楚,你访问的元素是什么
							//						partionList[keyArr[i]]
							//						console.log(partionList[keyArr[i]])
							const tmpArr = partionList[keyArr[i]]
							for(let j = 0; j < tmpArr.length; j++) {
								//							内循环
//								console.log(tmpArr[j])
								//							核心代码
								if(tmpArr[j].tid == tid) {
									return keyArr[i]
								}
//								console.log(111)
							}
						}
					}
					this.curTid = handleNav()
				} else {
					this.curTid = tid
				}
				this.NavList = partionList[this.curTid]
			},
		}
	}
</script>

<style lang="scss">
	$maincolor:#fb7299;
	.cartoon_list {
		position: fixed;
		z-index: 50;
		width: 100%;
		overflow: hidden;
		height: 37px;
		transform: translateY(-100%);
		transition: all 0.2s;
		&.active{
			transform: none;
		}
		.list_on {
			overflow-x: auto;
			overflow-y: hidden;
			white-space: nowrap;
			padding-left: 18px;
			padding-right: 18px;
			background-color: #f9f9f9;
			height: 37.6px;
			line-height: 37.6px;
			z-index: 1;
			a:not(:last-of-type){
				margin-right: 18px;
				height: 100%;
			}
			p {
				vertical-align: top;
				display: inline-block;
				font-size: 12px;
				color: #757575;
				
			}
			&::-webkit-scrollbar {
				display: none;
			}
		}
	}
	
	.cartoon_list .list_on .active {
		p{
			color: $maincolor;
		}
		
	}
</style>